数据可视化：为全球受众创建无障碍的图表

数据可视化是交流信息的强大工具，但其有效性取决于其无障碍性。如果图表的设计没有考虑到无障碍性，那么全球受众中的很大一部分人——包括残障人士、有语言障碍或技术水平不同的人——都可能被排除在外。本文提供了一份全面的指南，旨在创建具有包容性、易于所有人理解的无障碍数据可视化。

理解无障碍数据可视化的重要性

数据可视化的无障碍性不仅仅是遵守 WCAG（Web内容无障碍指南）或 Section 508 等法律要求。它是为了给所有人创造更好的用户体验。无障碍的图表具有以下特点：

• 残障人士可用：屏幕阅读器用户、低视力或色盲人士以及有运动障碍的人都依赖于无障碍设计来理解数据。
• 所有人更易理解：清晰的标签、足够的对比度和组织良好的数据能提高所有用户的理解能力。
• 更有效的跨文化交流：避免使用特定文化的符号，并使用清晰简洁的语言，使可视化内容在不同文化背景下更易于理解。
• 对移动用户更友好：无障碍设计原则通常能转化为更好的移动体验，确保可视化内容在较小的屏幕上也能正常查看和使用。
• 有利于SEO（搜索引擎优化）：为图像提供替代文本并有逻辑地组织内容，可以提高搜索引擎排名，从而增加可见性和覆盖范围。

无障碍数据可视化的关键原则

创建无障碍的图表需要仔细考虑几个关键原则：

1. 替代文本 (Alt Text)

替代文本是对图表的简洁描述，可由屏幕阅读器朗读。它让视障用户能够理解所呈现的信息。在撰写替代文本时，请考虑以下几点：

• 描述性：总结图表的主要信息。数据讲述了什么故事？
• 简洁性：保持描述简短扼要，最好在150个字符以内。
• 包含上下文：提供有关可视化数据的背景信息，例如数据来源和时间段。
• 考虑可视化的复杂性：对于复杂的图表，您可能需要提供更长、更详细的描述或指向数据表的链接。

示例：

无障碍性差： <img src="sales.png" alt="图表">

无障碍性好： <img src="sales.png" alt="折线图显示2023年第四季度全球销售额相较于第三季度增长了15%。">

2. 颜色与对比度

颜色不应是传达信息的唯一方式。色盲或低视力用户可能无法区分某些颜色。请确保数据元素与背景之间有足够的色彩对比度。

• 使用色彩对比度检查工具：像 WebAIM 的色彩对比度检查器 (https://webaim.org/resources/contrastchecker/) 这样的工具可以帮助您确定颜色组合是否符合 WCAG 的要求。
• 避免仅依赖颜色：除了颜色之外，还应使用图案、标签和纹理来区分数据元素。
• 考虑色盲用户：使用对不同类型色盲人士友好的调色板。有许多工具可以模拟您的可视化内容在各种色觉缺陷者眼中的样子。
• 提供替代视觉提示：使用边框、形状和大小来区分数据点。

示例：在条形图中使用不同颜色代表产品类别时，除了颜色外，还应使用不同的图案（如实心、条纹、点状）并在每个条形上添加标签。

3. 标签与文本

清晰简洁的标签对于理解数据可视化至关重要。请确保所有坐标轴、数据点和图例都已正确标记。使用足够大的字体以便阅读。

• 使用清晰简洁的语言：避免使用并非所有用户都能理解的行话和技术术语。
• 提供足够的字体大小：正文文本至少使用12号字体，标题至少使用14号字体。
• 确保足够的间距：避免标签和数据点过于拥挤。
• 使用描述性标题：提供一个能准确描述图表内容的标题。

示例：不要使用像“Q1”这样的缩写标签来表示第一季度，而应使用完整的术语“第一季度”。

4. 数据结构与组织

数据的结构和组织方式会显著影响其无障碍性。应有逻辑地排列数据，并使用适当的图表类型来有效呈现信息。

• 使用适当的图表类型：选择最能代表数据和您想传达的信息的图表类型。例如，使用条形图比较分类数据，折线图显示时间趋势，饼图显示比例。
• 有逻辑地排序数据：按有意义的顺序对数据进行排序，例如升序、降序或按类别。
• 分组相关数据：将相关的数据点组合在一起，使其更容易理解它们之间的关系。
• 避免杂乱：移除可能分散对数据注意力的不必要元素，如网格线或过多的装饰。

示例：不要使用复杂的3D图表来表示简单的数据，而应使用2D条形图或折线图。

5. 交互性与键盘导航

如果您的数据可视化包含交互元素，例如工具提示或钻取功能，请确保键盘用户和屏幕阅读器用户也能够访问它们。

• 提供键盘导航：确保所有交互元素都可以使用键盘访问和激活。
• 使用 ARIA 属性：使用 ARIA (无障碍富互联网应用) 属性向屏幕阅读器提供有关交互元素用途和状态的附加信息。
• 提供清晰的焦点指示器：在使用键盘导航时，明确哪个元素获得了焦点。
• 确保工具提示是无障碍的：为工具提示提供替代文本，或以单独的、无障碍的格式提供信息。

示例：如果图表中的工具提示在鼠标悬停在数据点上时会显示详细信息，请确保在使用键盘聚焦该数据点时也能获得相同的信息。

6. 表格作为替代方案

对于依赖屏幕阅读器或喜欢以表格格式分析数据的用户，强烈建议提供一个数据表作为替代方案。这使他们能够访问原始数据并以自己的方式进行探索。

• 提供指向数据表的链接：在图表下方包含一个指向数据表的链接。
• 使用语义化 HTML：使用 <table>、<thead>、<tbody>、<th> 和 <td> 等语义化 HTML 元素来构建表格。
• 提供列标题：使用列标题清楚地标识每列中的数据。
• 使用标题：为表格提供一个描述其内容的标题（caption）。

示例：

<table>
  <caption>按地区划分的全球销售额 - 2023年第四季度</caption>
  <thead>
    <tr>
      <th scope="col">地区</th>
      <th scope="col">销售额 (美元)</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>北美</td>
      <td>1,200,000</td>
    </tr>
    <tr>
      <td>欧洲</td>
      <td>900,000</td>
    </tr>
    <tr>
      <td>亚太地区</td>
      <td>750,000</td>
    </tr>
  </tbody>
</table>

用于无障碍数据可视化的工具和技术

有几种工具和技术可以帮助您创建无障碍的数据可视化：

• 无障碍性检查工具：像 WAVE (Web Accessibility Evaluation Tool) 这样的工具可以帮助您识别可视化内容中的无障碍性问题。
• 色彩对比度检查工具：像 WebAIM 的色彩对比度检查器可以帮助您确保足够的色彩对比度。
• 屏幕阅读器：使用像 NVDA 或 JAWS 这样的屏幕阅读器测试您的可视化内容对于确保无障碍性至关重要。
• 数据可视化库：一些数据可视化库，如 D3.js 和 Chart.js，提供内置的无障碍功能。请查阅其文档以了解无障碍选项。
• 专用的无障碍插件：在特定框架（如 React, Angular, Vue.js）中，探索使用针对数据可视化无障碍性量身定制的插件或扩展。

无障碍数据可视化示例

示例1：无障碍条形图（按大洲划分的全球人口）

描述：一个显示2023年按大洲划分的全球人口的条形图。该图表使用高对比度颜色、清晰的标签和替代文本。

无障碍特性：

• 替代文本：“条形图显示2023年按大洲划分的全球人口。亚洲人口最多，为47亿，其次是非洲14亿，欧洲7.5亿，北美6亿，南美4.4亿，大洋洲4500万。”
• 色彩对比度：使用高对比度颜色，以确保条形与背景易于区分。
• 标签：每个条形都标有大洲名称和人口数量。
• 数据表：图表下方提供了指向数据表的链接。

示例2：无障碍折线图（全球气温趋势）

描述：一个显示1880年至2023年全球平均气温趋势的折线图。该图表使用不同的线条样式来区分不同区域，并配有清晰的标签和替代文本。

无障碍特性：

• 替代文本：“折线图显示1880年至2023年的全球平均气温趋势。图表显示在过去一个世纪中，全球气温稳步上升，尤其是在近几十年增长尤为迅猛。”
• 线条样式：使用不同的线条样式（如实线、虚线、点线）来区分不同区域。
• 标签：坐标轴标有年份和温度。
• 数据表：图表下方提供了指向数据表的链接。

为全球受众创建无障碍数据可视化的最佳实践

除了上述关键原则和示例外，在为全球受众创建无障碍数据可视化时，还应考虑以下最佳实践：

• 了解您的受众：考虑目标受众的不同背景、能力和技术专长。
• 使用包容性语言：避免使用并非所有用户都能理解的行话、俚语和特定文化的引用。
• 提供上下文：提供有关可视化数据的充分背景信息，包括来源、时间段和方法论。
• 与用户一起测试您的可视化内容：与残障人士和来自不同文化背景的用户进行用户测试，以确保您的可视化内容是无障碍且易于理解的。
• 记录您的无障碍工作：记录您为使可视化内容无障碍所采取的步骤，包括使用的工具和技术。
• 保持更新：无障碍标准和最佳实践在不断发展。请随时关注最新的指南和建议。
• 考虑翻译：如果您计划将可视化内容分发给使用不同主要语言的全球受众，请为标签、标题和替代文本的翻译做好规划。
• 处理文化敏感性：在选择颜色、符号和视觉隐喻时，要注意文化规范和敏感性。在一种文化中可以接受的东西，在另一种文化中可能具有冒犯性。
• 时区和日期格式：在可视化与时间相关的数据时，请务必明确指定时区。处理日期时，提供灵活的日期格式（如YYYY-MM-DD, MM/DD/YYYY等）以适应不同地区的偏好。
• 货币考虑：如果您的数据涉及财务数据，请指明货币。在可能的情况下，提供转换选项，让用户以当地货币查看数据。

结论

创建无障碍的图表对于确保数据能被所有人理解和使用至关重要。通过遵循本文中概述的原则和最佳实践，您可以创建出具有包容性、有效且能为全球受众所用的数据可视化。请记住，无障碍性不仅仅是一个合规问题；它是一个为所有用户改善体验的机会。